<!--
 * @Description: 账户规则
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:13:33
 * @LastEditTime: 2021-10-11 14:31:13
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <template v-if="show === 0">
      <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
        <div slot="top">
          <el-form :model="filterSearch" label-width="80px">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="规则名称">
                  <el-input v-model.trim="filterSearch.keyword" placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>
              <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
              </el-row>
            </el-row>
          </el-form>
        </div>
        <div slot="bottom">
          <!-- 新增 -->
          <el-button
            size="medium"
            type="primary"
            plain
            @click="showCreate('create',{})"
            v-power="2"
          >新建</el-button>
        </div>
      </table-bar>
      <tao-table
        class="table-box"
        :data="dataList"
        :page="page"
        @changePage="changePage"
        :showPage="true"
        ref="table"
      >
        <el-table-column
          label="ID"
          align="center"
          width="100"
          prop="id"
          sortable
          v-if="columns[0].show"
        />
        <el-table-column
          label="规则名称"
          min-width="200"
          show-overflow-tooltip
          prop="ruleName"
          v-if="columns[1].show"
        />
        <!-- 操作 编辑 删除-->
        <el-table-column fixed="right" align="center" :label="$t('user.Operation')" width="150px">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="showCreate('edit',scope.row)"
              v-power="scope.row.dgId === 100000 ? 0 : 2"
            >编辑</el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              @click="handleDelete(scope)"
              v-power="scope.row.dgId === 100000 ? 0 : 2"
            >删除</el-button>
          </template>
        </el-table-column>
      </tao-table>
    </template>
    <template v-if="show === 1">
      <forms :type="type" :ruleInfo="ruleInfo" @handleChange="handleChange"></forms>
    </template>
  </div>
</template>

<script>
import forms from './forms.vue';
export default {
  components: {
    forms
  },
  data () {
    return {
      dataList: [],
      filterSearch: {
        keyword: ''
      },
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: 'ID', show: true },
        { name: '规则名称', show: true }
      ],
      show: 0,
      type: 'create',
      ruleInfo: {}
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  methods: {
    // 新建、编辑规则
    showCreate (type, row) {
      let _this = this;
      if (row.id === 1) {
        _this.$message.warning('默认规则禁止编辑！');
      } else {
        _this.type = type;
        _this.ruleInfo = row;
        _this.show = 1;
      }
    },
    // 回调
    handleChange (val) {
      let _this = this;
      _this.show = val;
      _this.type = 'create';
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        keyword: ''
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        keyword: _this.filterSearch.keyword,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/gateway/accountrule/paged',
        data: params
      }).then(res => {
        let { count, objects } = res;
        _this.page.total = count;
        _this.dataList = objects;
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 删除规则
    handleDelete (scope) {
      let _this = this;
      if (scope.row.id === 1) {
        _this.$message.warning('默认规则禁止删除！');
      } else {
        this.$confirm('您确定要删除当前数据吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          _this.$http.deleted({
            url: '/api/gateway/accountrule/' + scope.row.id
          }).then(res => {
            _this.$message.success('删除成功！');
            _this.refresh();
          });
        }).catch(() => {
          _this.$message.info('取消删除');
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.table-box {
  ::v-deep .el-button {
    padding: 0;
  }
}
</style>